<template>
    <div :class="{'pt-4': (user && user.kyc != 1) }">
        <v-row v-if="(kyc && is_supper) && (user && user.kyc == 1)">
            <v-col :cols="12">
                <v-btn small depressed class="float-right mr-2" color="error" @click="reject" v-if="user.kyc == 1">审核不通过</v-btn>
                <v-btn small depressed class="float-right mr-2" color="primary"  @click="pass"  v-if="user.kyc == 1">审核通过</v-btn>
            </v-col>
        </v-row>
        <v-row v-if="kyc">
            <v-col :md="3">
                <span class="font-weight-bold">认证状态:</span>
                <span  class="red--text ml-2" v-if="user.kyc == 1 || user.kyc == -1">
                    {{user.kyc_name}}
                </span>
                <span class="ml-2" v-else>
                    {{user.kyc_name}}
                </span>
            </v-col>
            <v-col :md="3">
                <span class="font-weight-bold">真实姓名:</span>
                <span class="ml-2"> {{kyc.realname}}</span>
            </v-col>
            <v-col :md="3">
                <span class="font-weight-bold">电话号码:</span>
                <span class="ml-2"> {{kyc.mobile}}</span>
            </v-col>
            <v-col :md="3">
                <span class="font-weight-bold">身份证号:</span>
                <span class="ml-2"> {{kyc.idcard}}</span>
            </v-col>


            <v-col :md="12">
                <span class="font-weight-bold">所属地标签:</span>
                <span class="ml-2">
                    <v-container>
                        <!-- 添加标签的输入框 -->
                        <v-text-field
                            v-model="newTag"
                            label="列：四川省，苏州市..."
                            label-class="text-h6"
                            append-icon="mdi-plus"
                            @click:append="addTag"
                            @keydown.enter="addTag"
                            clearable
                        ></v-text-field>

                        <!-- 标签展示区域 -->
                        <v-chip
                            v-for="(tag, index) in tags"
                            :key="index"
                            class="ma-2"
                        >
                            {{ tag }}
                            <v-icon
                                right
                                @click="removeTag(index)"
                            >
                                mdi-close-circle
                            </v-icon>
                        </v-chip>
                    </v-container>
                </span>
            </v-col>

<!--            <v-col :md="12">-->
<!--&lt;!&ndash;                <span class="font-weight-bold">所属地标签:</span>&ndash;&gt;-->
<!--&lt;!&ndash;                <span class="ml-2"> {{kyc.idcard}}</span>&ndash;&gt;-->
<!--                <v-col cols="3">-->
<!--                    <span class="font-weight-bold">所属地标签:</span>-->
<!--                </v-col>-->
<!--                <v-col cols="9">-->
<!--                    <v-container>-->
<!--                        &lt;!&ndash; 添加标签的输入框 &ndash;&gt;-->
<!--                        <v-text-field-->
<!--                            v-model="newTag"-->
<!--                            label="列：四川省，苏州市..."-->
<!--                            label-class="text-h6"-->
<!--                            append-icon="mdi-plus"-->
<!--                            @click:append="addTag"-->
<!--                            @keydown.enter="addTag"-->
<!--                            clearable-->
<!--                        ></v-text-field>-->

<!--                        &lt;!&ndash; 标签展示区域 &ndash;&gt;-->
<!--                        <v-chip-->
<!--                            v-for="(tag, index) in tags"-->
<!--                            :key="index"-->
<!--                            class="ma-2"-->
<!--                        >-->
<!--                            {{ tag }}-->
<!--                            <v-icon-->
<!--                                right-->
<!--                                @click="removeTag(index)"-->
<!--                            >-->
<!--                                mdi-close-circle-->
<!--                            </v-icon>-->
<!--                        </v-chip>-->
<!--                    </v-container>-->
<!--                </v-col>-->
<!--            </v-col>-->


            <v-col :md="6" :xl="12">
                <Photoswipe>
                <img style="max-height: 300px; width: 100%; object-fit: cover;" :src="kyc.image_face"  v-pswp="kyc.image_face" />
                </Photoswipe>
            </v-col>
            <v-col :md="6" :xl="12">
                <Photoswipe>
                <img style="max-height: 300px; width: 100%; object-fit: cover;" :src="kyc.image_back"  v-pswp="kyc.image_back" />
                </Photoswipe>
            </v-col>
        </v-row>


        <v-dialog v-model="dialogAudit" max-width="400px">
          <v-card v-if="kyc">
            <v-card-title class="text-h5">{{passValue == 'yes' ? "审核通过" : "审核不通过"}}</v-card-title>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn depressed @click="dialogAudit = false">取消</v-btn>
              <v-btn depressed color="error" @click="confirmAudit" :loading="saving">确定</v-btn>
              <v-spacer></v-spacer>
            </v-card-actions>
          </v-card>
        </v-dialog>
    </div>
</template>

<script>
    import axios from "axios";
    import { mapGetters } from 'vuex';

    export default {
        data: () => ({
            id: 0,
            kyc: null,
            user: null,
            dialogAudit: false,
            saving: false,
            newTag:[],
            tags:[],
            passValue: 'yes'
        }),

        computed: {
            ...mapGetters([
                'is_supper',
                'is_manager'
            ]),
        },

        watch: {
            id(v) {
                this.load();
            }
        },

        created() {
            this.id = this.$route.params.id;
        },

        beforeRouteUpdate(to, from, next) {
            this.id = to.params.id;
            next();
        },

        methods: {
            addTag() {
                if (this.newTag && this.newTag.trim()) {
                    // 防止重复添加
                    if (!this.tags.includes(this.newTag.trim())) {
                        this.tags.push(this.newTag.trim())
                    }
                    this.newTag = '' // 清空输入框
                }
            },
            removeTag(index) {
                console.log('删除')
                this.tags.splice(index, 1) // 通过索引删除标签
            },
            reject() {
                this.dialogAudit = true;
                this.passValue = "no";
            },
            pass() {
                this.dialogAudit = true;
                this.passValue = "yes";
            },
            load() {
                  axios.get(`/user/${this.id}/kyc`).then((response) => {
                    if(response.data.code == 0) {
                        this.kyc = response.data.data.kyc;

                        this.tags = response.data.data.kyc.address_tag ?? []

                        this.user = response.data.data.user;
                    }
                })
                .catch(function () {})
                .then(function () {
                });
            },

            confirmAudit() {
                const that = this;
                that.saving = true;
                axios.post( `/user/${this.id}/kyc`, {pass: this.passValue,tag: this.tags}).then((response) => {
                    if (response.data.code == 0) {
                        that.load();
                        that.dialogAudit = false;
                    }

                    this.$toast.open({
                        message: response.data.msg,
                        type: response.data.code == 0 ? 'success' : 'error',
                        position: 'top-right',
                    });
                }).catch(function () {})
                .then(function () {
                    that.saving = false;
                });
            }

        }
    }
</script>
